<template>
  <view class="preview">
    <swiper :circular="true">
      <swiper-item v-for="item in receiveData" :key="item._id">
        <image @click="maskChange" :src="item?.imageUrl" mode="scaleToFill" />
      </swiper-item>
    </swiper>
    <!-- 遮罩层 -->
    <view class="mask" v-if="maskState">
      <view class="return" @click="goBack" :style="{ top: `${menuButtonInfo.top}px` }">
        <uni-icons type="back" color="#fff" size="22" />
      </view>
      <view class="count"> 3 / 9</view>
      <view class="time"> <uni-dateformat :date="new Date()" format="hh:mm" /> </view>
      <view class="date"> <uni-dateformat :date="new Date()" format="MM月dd日" /> </view>
      <view class="footer">
        <view class="box" @click="openInfo">
          <uni-icons type="info" size="28"> </uni-icons>
          <view class="text"> 信息 </view>
        </view>
        <view class="box" @click="openComment">
          <uni-icons type="star" size="28"> </uni-icons>
          <view class="text"> 5分 </view>
        </view>
        <view class="box">
          <uni-icons type="download" size="24"> </uni-icons>
          <view class="text"> 下载 </view>
        </view>
      </view>
    </view>
    <!-- 弹出层 -->
    <uni-popup ref="popupRef" type="bottom">
      <view class="infoPopup">
        <view class="header">
          <view></view>
          <view class="title">壁纸信息</view>
          <view class="close" @click="closePopup">
            <uni-icons type="closeempty" color="#999" size="24" />
          </view>
        </view>
        <scroll-view scroll-y>
          <view class="content">
            <view class="row">
              <view class="label">壁纸ID：</view>
              <text :selectable="true" class="id">123456789</text>
            </view>
            <view class="row">
              <view class="label">分类：</view>
              <text class="id classify">明星美女</text>
            </view>
            <view class="row">
              <view class="label">评分：</view>
              <view class="id rate">
                <uni-rate readonly touchable />
                <text class="score">5分</text>
              </view>
            </view>
            <view class="row">
              <view class="label">发布者：</view>
              <text class="id">001</text>
            </view>
            <view class="row">
              <view class="label">摘要：</view>
              <text class="id">文字简洁</text>
            </view>
            <view class="row">
              <view class="label">标签：</view>
              <view class="id tabs">
                <text class="tab" v-for="item in 3" :key="item">标签名</text>
              </view>
            </view>
            <view class="copyright">
              声明:本图片来用户投稿，非商业使用，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱2775902727@qq.com，管理将删除侵权壁
              纸，维护您的权益。
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- 评分弹窗 -->
    <uni-popup ref="scorePopup" :is-mask-click="false">
      <view class="scorePopup">
        <view class="header">
          <view></view>
          <view class="title">壁纸评分</view>
          <view class="close" @click="closeComment">
            <uni-icons type="closeempty" color="#999" size="24" />
          </view>
        </view>
        <!-- 评分内容 -->
        <view class="content">
          <uni-rate v-model="userComment" :allow-half="true" />
          <view class="text">您的评分：{{ userComment }}分</view>
        </view>
        <view class="footer">
          <button @click="sumbitScore" :disabled="!userComment" plain type="default" size="mini">
            确认评分
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import type { bannerData } from '@/types/bannerPic'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
//接收数据
const receiveData = ref<bannerData[]>([])
// 获取胶囊按钮的位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
//用户评分
const userComment = ref(0)
//评分弹窗实例
const scorePopup = ref()
//弹出层实例
const popupRef = ref()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//遮罩层显示
const maskState = ref<boolean>(true)
//遮罩层回调
const maskChange = () => {
  maskState.value = !maskState.value
}
//关闭评分
const closeComment = () => {
  scorePopup.value.close()
}
//评分
const openComment = () => {
  //打开评分弹窗
  scorePopup.value.open()
}
//打开信息
const openInfo = () => {
  popupRef.value.open()
}
//关闭弹出层
const closePopup = () => {
  popupRef.value.close()
}
//提交评分
const sumbitScore = () => {
  console.log('评分：', userComment.value)
  //关闭评分弹窗
  closeComment()
}
//返回
const goBack = () => {
  uni.navigateBack()
}
// 生命周期钩子
onLoad((options?: { data?: string }) => {
  if (!options?.data) {
    uni.showToast({ title: '缺少参数', icon: 'error' })
    return
  }
  try {
    // 解码并解析数据
    const decoded = decodeURIComponent(options.data)
    receiveData.value = JSON.parse(decoded) as bannerData[]
    console.log('接收数据:', receiveData.value)
  } catch (e) {
    console.error('解析失败:', e)
    uni.showToast({ title: '数据解析失败', icon: 'error' })
    uni.navigateBack() // 可选：解析失败时返回
  }
})
</script>

<style scoped lang="scss">
.preview {
  position: relative;
  width: 100%;
  height: 100vh;
  swiper {
    width: 100%;
    height: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .mask {
    & > view {
      position: absolute;
      left: 0;
      color: #fff;
      right: 0;
      width: fit-content;
    }
    .return {
      left: 80rpx;
      z-index: 10;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      padding: 10rpx;
      box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
    }
    .count {
      margin: auto;
      top: 10vh;
      background: rgba(0, 0, 0, 0.3);
      font-size: 28rpx;
      border-radius: 40rpx;
      padding: 8rpx 28rpx;
      backdrop-filter: blur(10rpx);
    }
    .time {
      margin: auto;
      font-size: 140rpx;
      top: calc(10vh + 80rpx);
      font-weight: 100;
      line-height: 1em;
      text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
    }
    .date {
      margin: auto;
      font-size: 34rpx;
      top: calc(10vh + 240rpx);
      text-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
    }
    .footer {
      margin: auto;
      display: flex;
      background: rgba(255, 255, 255, 0.8);
      bottom: 10vh;
      width: 65vw;
      height: 120rpx;
      border-radius: 120rpx;
      color: #000;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(20rpx);
      .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rpx 12rpx;
        .text {
          font-size: 26rpx;
          color: #000;
        }
      }
    }
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 32rpx;
      font-weight: 600;
    }
    .close {
      padding: 10rpx;
    }
  }
  .infoPopup {
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    padding: 30rpx;
    overflow: hidden;

    scroll-view {
      max-height: 50vh;
      .content {
        .row {
          display: flex;
          align-items: center;
          padding: 16rpx 0;
          line-height: 1.7em;
          .label {
            font-size: 30rpx;
            width: 140rpx;
            color: #333;
            text-align: right;
          }
          .id {
            flex: 1;
            width: 0;
          }
          .classify {
            color: orange;
          }
          .rate {
            display: flex;
            align-items: center;
            .score {
              font-size: 26rpx;
              color: #000;
              padding-left: 10rpx;
            }
          }
          .tabs {
            display: flex;
            flex-wrap: wrap;
            .tab {
              padding: 4rpx 12rpx;
              margin-right: 10rpx;
              border-radius: 20rpx;
              font-size: 24rpx;
              color: orange;
              border: 1px solid orange;
            }
          }
        }
        .copyright {
          font-size: 24rpx;
          color: #999;
          padding: 20rpx 0;
          line-height: 1.7em;
        }
      }
    }
  }
  .scorePopup {
    background: #fff;
    width: 70vw;
    border-radius: 30rpx;
    padding: 30rpx;
    overflow: hidden;
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30rpx 0;
      .text {
        font-size: 30rpx;
        color: orange;
        padding: 20rpx 0;
      }
    }
    .footer {
      display: flex;
      justify-content: center;
      padding: 20rpx 0;
    }
  }
}
</style>
